<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog"
    width="800px" @open="open" @close="close" :append-to-body="true" :modal-append-to-body="true">
    <div class="aaa">
      <el-form class="tl-form" ref="form" :model="model" :rules="rules" :disabled="disableEditSubmit">
        <el-table border :data="modelForBudget.tableData" style="width: 100%;"
          :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column width="200px" align="center" label="任命类型">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.appointmenttype'" :rules="rules.validateRequire">
                <el-select style="width:150px" v-model="scope.row.projectrole" placeholder="">
                  <el-option v-for="item in appointmentTypeList" :key="item.code" :label="item.name"
                    :value="item.code" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="200px" align="center" label="项目角色">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.projectrole'" :rules="rules.validateRequire">
                <el-select style="width:150px" v-model="scope.row.projectrole" placeholder="">
                  <el-option v-for="item in projectRoleList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="200px" align="center" label="项目工作组">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.workgroup'" :rules="rules.validateRequire">
                <el-select style="width:150px" v-model="scope.row.workgroup" placeholder="">
                  <el-option v-for="item in workGroupList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="200px" align="center" label="职务">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.position'" :rules="rules.validateRequire">
                <el-select style="width:150px" v-model="scope.row.position" placeholder="">
                  <el-option v-for="item in positionList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="200px" align="center" label="职责">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.position'" :rules="rules.validateRequire">
                <el-select style="width:150px" v-model="scope.row.position" placeholder="">
                  <el-option v-for="item in positionList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="addLineForBudget" class="addBtn"
                v-if="scope.$index == modelForBudget.tableData.length - 1">
                <i class="el-icon-plus"></i>
              </el-button>

              <el-button v-if="modelForBudget.tableData.length > 1"
                @click="handleDeleteForBudget(scope.$index, scope.row)" class="del-btn">
                <i class="el-icon-minus"></i>
              </el-button>
              <!-- <el-button size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="disableEditSubmit === false">确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
/** 子组件 */
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: {},
  data() {
    return {
      moduleTitle: '项目任命-项目组成员',
      urlPrefix: '/mpm/projectTeam/',
      url: {
        // 额外的url
      },
      modelForBudget: {
        tableData: [
          {
            costtype: '',
            budgetmoney: undefined,
            note: ''
          }
        ]
      }
    }
  },
  props: {
    parentId: {
      type: [Number, String],
      default: ''
    }
  },
  methods: {
    loaded() {
      // 页面加载完毕执行
      if (this.isAdd) {
        this.$set(this.model, 'projectcode', this.parentId)
      }
    },
    // 添加预算明细
    addLineForBudget() {
      this.modelForBudget.tableData.push({
        costtype: '',
        budgetmoney: undefined,
        note: ''
      })
    },
    // 删除预算明细
    handleDeleteForBudget(index) {
      this.modelForBudget.tableData.splice(index, 1)
    }
  }
}
</script>
<style scoped>
.aaa {
  margin-bottom: 0px;
}
.aaa >>> .el-form-item {
  margin-bottom: 0px;
}
.aaa >>> .el-form-item__error {
  float: right;
  margin-top: -20px;
  margin-left: 30px;
}
.aaa >>> .el-form-item__content {
  margin-left: 0px;
}
</style>

